<template>
  <div v-if="detail">
    <MainSearchDetail v-model="visible"
                      :title="title">
      <div class="car-popup-cont-left">
        <div class="search-detail-left">
          <div class="left-echar">
            <div class="left-echar-item">
              <Echarts width="250px"
                       height="250px"
                       key="speed"
                       :options="speedOptions"
                       ref="speedRef"></Echarts>
            </div>
            <div class="left-echar-item">
              <Echarts width="250px"
                       height="250px"
                       key="oil"
                       :options="oilOptions"
                       ref="oilRef"></Echarts>
            </div>
          </div>
          <div class="left-carimg">
            <img :src="detail.carPicture ? detail.carPicture : carImg">
          </div>
          <div class="left-btns">
            <div class="left-btns-item"
                 @click.stop="onClickTrack">
              <Icon custom="i-icon icon-guiji"
                    size="22"
                    color="#eee" />
              历史轨迹
            </div>
            <!-- 0在线 1离线 2无设备 -->
            <div class="left-btns-item"
                 :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
                 @click.stop="onClickVideo">
              <Icon custom="i-icon icon-jiankong11"
                    size="22" />
              摄像头
            </div>
            <div class="left-btns-item"
                 @click.stop="onClickRefuel('refuel')">
              <Icon custom="i-icon icon-guiji"
                    size="22"
                    color="#eee" />
              加油记录
            </div>
            <div class="left-btns-item"
                 @click.stop="onClickRefuel('repair')">
              <Icon custom="i-icon icon-guiji"
                    size="22"
                    color="#eee" />
              维修记录
            </div>
          </div>
        </div>
      </div>

      <div class="car-popup-cont-right">
        <div class="search-detail-right detail-popup-right">
          <div class="right-top">
            <div class="right-top-row1 border-bottom">
              基本信息
            </div>
            <div class="right-top-row2">
              <img src="../../../../assets/main/carImg.png">
              <div class="right-top-row2-cont">
                <div class="right-top-row2-cont-item">
                  <div>
                    驱动方式：
                    <span>{{detail.drivemodel || '- -'}}</span>
                  </div>
                  <div class="line1"
                       :title='detail.departmentTree'>
                    所属机构：
                    <span>{{detail.departmentTree || '- -'}}</span>
                  </div>
                  <div>
                    油箱容积：
                    <span>{{detail.detail.fuelTank || '- -'}}升</span>
                  </div>
                </div>
                <div class="right-top-row2-cont-item">
                  <div>
                    发动机号：
                    <span>{{detail.engine || '- -'}}</span>
                  </div>
                  <div>
                    车架号：
                    <span>{{detail.carframe || '- -'}}</span>
                  </div>
                  <div>
                    作业宽度：
                    <span>{{detail.detail.workwidth || '- -'}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-top-row3">
              <div>
                车辆类型：
                <span>{{detail.carTypeName || '--'}}</span>
              </div>
              <div>
                车辆型号：
                <span>{{detail.carmodelname || '--'}}</span>
              </div>
              <div>
                作业类型：
                <span>{{detail.workTypeName || '- -'}}</span>
              </div>
            </div>
          </div>

          <!-- <div class="right-cont">
            <div class="right-cont-title popup-title">
              运营数据
            </div>
            <div class="right-cont-cont">
              <div class="right-cont-cont-row1">
                <div>
                  成本总和
                  <span>
                    <span class="number">0</span>
                    元
                  </span>
                </div>
                <div>
                  行驶公里
                  <span>
                    <span class="number">14442</span>
                    公里
                  </span>
                </div>
                <div>
                  百公里油耗
                  <span>
                    <span class="number">31.61</span>
                    升
                  </span>
                  (同车型比<span>27.61升 12.56%</span>)
                </div>
              </div>
              <div class="right-cont-cont-row2">
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-shuishixin"
                          size="20"
                          color="#aaa" />
                    油费
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-youliang1"
                          size="20"
                          color="#aaa" />
                    保养
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-baoxian"
                          size="20"
                          color="#aaa" />
                    保险
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-jianxiu"
                          size="20"
                          color="#aaa" />
                    维修
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
              </div>
            </div>
          </div> -->

          <div class="right-bottom">
            <div class="right-bottom-box">
              <div class="border-bottom right-bottom-box-title">
                <ul>
                  <li @click.stop="onClickWork(0)"
                      :class="{'current':currentWorkIndex == 0}">作业概况</li>
                  <li @click.stop="onClickWork(1)"
                      :class="{'current':currentWorkIndex == 1}">作业记录</li>
                </ul>
                <DatePicker :value="workDate"
                            type="date"
                            style="width: 120px"
                            @on-change="onChangeWorkDate"></DatePicker>
              </div>
              <template v-if="currentWorkIndex==0">
                <div class="work-record">
                  <div class="work-cont-item"
                       v-for="(item,index) in workCaseArr"
                       :key='index'>
                    <div class="flex j-between status">
                      <p class="flex-1">{{item.planName || '--'}}</p>
                      <span class="unover"
                            v-if="item.status == 0">未开始</span>
                      <span class="unover"
                            v-if="item.status == 1">进行中</span>
                      <span class="unover"
                            v-if="item.status == 2">未完成</span>
                      <span class="over"
                            v-if="item.status == 3">已完成</span>
                    </div>
                    <div class="flex j-between">
                      <p>开始作业：{{getWorkTime(item.workStartTime) || '- -'}}</p>
                      <p>结束作业：{{getWorkTime(item.workEndTime) || '- -'}}</p>
                      <!-- <p>耗时：{{item.workTotalTime || '- -'}}</p> -->
                    </div>
                    <div class="flex j-between">
                      <p class="flex-1">{{item.gridName || '--'}}</p>
                      <span>{{item.shiftName}}【{{getWorkTime(item.planStartTime)}}~{{getWorkTime(item.planEndTime)}}】</span>
                    </div>
                    <div class="flex percent">
                      <p>完成度：</p>
                      <Progress class="m-r-5 m-l-5"
                                :percent="item.finishRate"
                                hide-info
                                stroke-color="#19be6b" />
                      <span>{{item.finishRate || '0'}}%</span>
                    </div>
                  </div>
                  <div class="noData"
                       v-if="workCaseArr.length == 0">
                    <img src="../../../../assets/main/blank_black.png">
                    <p>暂无数据</p>
                  </div>
                </div>
              </template>
              <template v-if="currentWorkIndex == 1">
                <div class="work-case">
                  <div class="noData"
                       v-if="workRecordArr.length == 0">
                    <img src="../../../../assets/main/blank_black.png">
                    <p>暂无数据</p>
                  </div>
                  <div class="work-case-item"
                       v-for="(item,index) in workRecordArr"
                       :key='index'>
                    <ul>
                      <li>
                        <label>作业对象：</label>
                        <span>{{item.gridName || '- -'}}</span>
                      </li>
                      <li v-if="item.jobType">
                        <label>作业类型：</label>
                        <span>{{item.jobType}}</span>
                      </li>
                      <li>
                        <label>提交时间：</label>
                        <span>{{getWorkTime(item.createTime)}}</span>
                      </li>
                      <li>
                        <label>完成情况：</label>
                        <span>{{item.content}}</span>
                      </li>
                    </ul>
                    <div class="multimedia">
                      <div class="item video-item"
                           v-previewVideo="item.videourl"
                           v-if="item.videourl">
                        <Icon custom="i-icon icon-bofang"
                              size="25"
                              color='#fff'></Icon>
                      </div>
                      <div class="item"
                           v-for="(items,indexs) in item.imgurls"
                           :key="indexs">
                        <el-image :src="items"
                                  fit="cover"
                                  :preview-src-list="[items]"
                                  class="detail-top-img"
                                  v-if="item.imgurls.length != 0">
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div class="calendar-box right-bottom-box">
              <div class="calendar-title border-bottom">
                <div @click.stop="onClickCalendarTab(0)"
                     :class="{'current':currentCalendarIndex == 0}">作业日历</div>
                <div @click.stop="onClickCalendarTab(1)"
                     :class="{'current':currentCalendarIndex == 1}">异常日历</div>
              </div>
              <div class="work-calendar">
                <div class="calendar"
                     v-show="currentCalendarIndex == 0">
                  <el-calendar v-model="workCalendar">
                    <template slot="dateCell"
                              slot-scope="{date, data}">
                      <!-- 非当月 -->
                      <div v-if="data.type != 'current-month'"
                           @click.stop>
                      </div>
                      <!-- 当月 -->
                      <div v-else
                           class="cont"
                           :class="{'day-after':isBeyondDate(data.day),'success':getWorkCalendarDate(data.day)}">
                        <p>
                          {{ data.day.split('-')[2]}}
                        </p>
                        <div class="cont-status"
                             v-if="getWorkCalendarDate(data.day) && getViolationCalendarDate(data.day)">
                          <span class="err"></span>
                        </div>
                      </div>
                    </template>
                  </el-calendar>
                </div>
              </div>
              <div class="violation-calendar">
                <div class="calendar"
                     v-show="currentCalendarIndex == 1">
                  <el-calendar v-model="violationCalendar">
                    <template slot="dateCell"
                              slot-scope="{date, data}">
                      <!-- 当月 -->
                      <div v-if="data.type != 'current-month'"
                           @click.stop>
                      </div>
                      <div v-else
                           class="cont"
                           :class="{'day-after':isBeyondDate(data.day),'cursor-pointer':getViolationCalendarDate(data.day),'success':getWorkCalendarDate(data.day) && getViolationCalendarDate(data.day)}"
                           @click.stop="onClickCalendar(data.day)">
                        <p>
                          {{ data.day.split('-')[2]}}
                        </p>
                        <div class="cont-status"
                             v-if="getViolationCalendarDate(data.day)">
                          <span class="err"></span>
                        </div>
                      </div>
                    </template>
                  </el-calendar>
                  <div class="case"
                       v-if="calendarCaseVisible">
                    <div class="title flex a-center j-between">
                      {{violationModalDate}}
                      <Icon custom="i-icon icon-guanbi cursor-pointer"
                            size="16"
                            @click.stop="calendarCaseVisible = false" />
                    </div>
                    <div class="cont">
                      <div class="item"
                           v-for="(item,index) in violationModalData"
                           :key="index">
                        <p>{{item.alarmTypeName || '- -'}}</p>
                        <span>{{item.number}}次</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MainSearchDetail>

    <Modal v-model="refuelVisible"
           :title="modalTitle"
           footer-hide
           width="1024">
      <div class="refuel">
        <div class="refuel-title">
          <div class="refuel-title-left">
            <span>加油日期</span>
            <DatePicker type="date"
                        placeholder="开始时间"
                        style="width: 120px"></DatePicker>
            <span>-</span>
            <DatePicker type="date"
                        placeholder="结束时间"
                        style="width: 120px"></DatePicker>
          </div>
          <div class="refuel-title-right">
            <div class="show"
                 @click.stop="getList">查询</div>
            <div>重置</div>
          </div>
        </div>
        <Table :columns="getColumns"
               :data="data"
               :loading="tableLoading"
               height="600"></Table>
      </div>
    </Modal>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import MainSearchDetail from "../template/MainSearchDetail.vue"
import Echarts from '../../../common/Echarts'
import { formatDate } from '@/utils/dateRangUtil';
export default {
  components: {
    MainSearchDetail,
    Echarts
  },
  data () {
    return {
      carImg: require('../../../../assets/main/car.png'),
      row: {
        videoUrl: 'https://hssfile.oss-cn-beijing.aliyuncs.com/file/wx_camera_1623298771160.mp4'
      },
      visible: false,
      dataId: '',
      title: '',
      detail: {
        detail: {}
      },
      detailCarCalendarIndex: 0,
      refuelVisible: false,
      modalTitle: '',
      data: [],
      tableLoading: false,
      columnsRefuel: [
        {
          title: '车牌号',
          // key: 'carnumber',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '所属机构',
          // key: 'deptidforcar',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '油卡编号',
          key: 'oilcardnum',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '加油量',
          key: 'oilnum',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '费用(元)',
          key: 'totalcost',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '服务商',
          key: 'servicevendorname',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '地址',
          key: 'place',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '加油时间',
          key: 'costtime',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
      ],
      columnsRepair: [
        {
          title: '车牌号',
          // key: 'carnumber',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '所属机构',
          // key: 'carnumber',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '维修单号',
          key: 'orderNo',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '车辆类型',
          // key: 'carnumber',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '费用(元)',
          key: 'totalcost',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '服务商',
          key: 'servicevendorname',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '地址',
          key: 'place',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        },
        {
          title: '加油时间',
          key: 'costtime',
          minWidth: 60,
          tooltip: true,
          align: 'center',
        }
      ],
      speedOptions: {
        series: [{
          type: 'gauge',
          max: 140,
          splitNumber: 5,
          // 展示当前进度
          progress: {
            show: true,
            width: 18
          },
          // 轴线样式
          axisLine: {
            lineStyle: {
              width: 3,
              color: [
                [1, '#0A241D']
              ]
            }
          },
          // 刻度样式
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#416C72'
            }
          },
          // 分割线样式
          splitLine: {
            length: 14,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          // 刻度标签
          axisLabel: {
            distance: 5,
            color: '#B9BBBE',
            fontSize: 14
          },
          // 指针固定点
          anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
              borderWidth: 10
            }
          },
          title: {
            show: true,
            offsetCenter: [0, '100%'],
            fontSize: 15,
            color: '#fff',
          },
          // 仪表盘详情
          detail: {
            valueAnimation: true,
            fontSize: 30,
            color: '#24B08E',
            offsetCenter: ['0', '70%']
          },
          data: [{
            value: 0,
            name: '车速'
          }],
          pointer: {
            width: 3,
            itemStyle: {
              color: '#fff',
              borderColor: '#fff'
            }
          }
        }]
      },
      oilOptions: {
        series: [{
          type: 'gauge',
          max: 420,
          splitNumber: 5,
          // 展示当前进度
          progress: {
            show: true,
            width: 18
          },
          // 轴线样式
          axisLine: {
            lineStyle: {
              width: 3,
              color: [
                [1, '#0A241D']
              ]
            }
          },
          // 刻度样式
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#416C72'
            }
          },
          // 分割线样式
          splitLine: {
            length: 14,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          // 刻度标签
          axisLabel: {
            distance: 5,
            color: '#B9BBBE',
            fontSize: 14
          },
          // 指针固定点
          anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
              borderWidth: 10
            }
          },
          title: {
            show: true,
            offsetCenter: [0, '100%'],
            fontSize: 15,
            color: '#fff',
          },
          // 仪表盘详情
          detail: {
            valueAnimation: true,
            fontSize: 30,
            color: '#24B08E',
            offsetCenter: [0, '70%']
          },
          data: [{
            value: 0,
            name: '油量'
          }],
          pointer: {
            width: 3,
            itemStyle: {
              color: '#fff',
              borderColor: '#fff'
            }
          }
        }]
      },
      currentWorkIndex: 0,    // 作业概况，作业记录 tab
      currentCalendarIndex: 0,  // 作业日历，异常日历 tab
      workDate: '',   // 作业概况，作业记录的日期选择器
      workCaseArr: [],  // 作业概况
      workRecordArr: [],   // 作业记录
      workMonth: '',  // 作业日历的月份
      workCalendar: new Date(), // 作业日历 日历组件
      violationCalendar: new Date(),  // 异常日历 日历组件
      violationDate: '',  // 违规日历的月份
      calendarCaseVisible: false,   // 违规日历弹框
      workCalendarArr: [],   // 作业日历
      violationArr: [], // 异常日历 报警违规数组
      violationModalData: [],   // 点击异常日历弹框时的数据
      violationModalDate: ''    // 点击异常日历弹框时的日历
    }
  },
  watch: {
    dataId (newVal) {
      if (newVal) {
        this.getDetail()
        this.getWorkList()
        this.getWorkCalendarList()
        this.getViolationCalendarList()
        this.getCarOikOrSpeed()
      }
    },
    visible (newVal) {
      if (!newVal) {
        this.currentWorkIndex = 0
        this.currentCalendarIndex = 0
        this.dataId = ''
        this.workCalendar = new Date()
        this.violationCalendar = new Date()
        this.calendarCaseVisible = false
        this.timeInit()
      }
    },
    calendarCaseVisible (newVal) {
      if (!newVal) {
        this.violationModalDate = ''
        this.violationModalData = []
      }
    }
  },
  computed: {
    getColumns () {
      let columns = []
      switch (this.modalTitle) {
        case '加油记录':
          columns = this.columnsRefuel
          break;
        case '维修记录':
          columns = this.columnsRepair
          break;
        default:
          break;
      }
      return columns
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      bus.$on('showMainSearchCarDetail', data => {
        this.dataId = data.id
        this.title = data.title
        // this.speedOptions.series[0].data[0].value = data.speed || 0
        // this.$refs.speedRef.init()
        this.visible = true
      })
      this.timeInit()
      // 作业日历组件上个月添加点击事件
      this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(
          '.work-calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn.addEventListener('click', () => {
          this.onClickWorkMonthList()
        })
      })
      // 作业日历组件下个月添加点击事件
      this.$nextTick(() => {
        // 点击后一个月
        let prevBtn = document.querySelector(
          '.work-calendar .el-calendar__button-group .el-button-group>button:last-child');
        prevBtn.addEventListener('click', () => {
          this.onClickWorkMonthList()
        })
      })
      // 违规日历组件上个月添加点击事件
      this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(
          '.violation-calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn.addEventListener('click', () => {
          this.onClickViolationMonthList()
        })
      })
      // 违规日历组件下个月添加点击事件
      this.$nextTick(() => {
        // 点击后一个月
        let prevBtn = document.querySelector(
          '.violation-calendar .el-calendar__button-group .el-button-group>button:last-child');
        prevBtn.addEventListener('click', () => {
          this.onClickViolationMonthList()
        })
      })
    },
    getDetail () {
      this.$store.dispatch('getCarDetail', this.dataId).then(res => {
        this.detail = res
        // 使用详情接口返回的绑定账号的id
        if (this.detail.bindaccount) {
          this.getWorkRecordList(this.detail.bindaccount)
        }
      })
    },
    // 获取作业概况
    getWorkList () {
      let params = {
        carId: this.dataId,
        workDate: this.workDate
      }
      this.$http.getMapCarWorkList(params).then((res) => {
        if (res.code === 200) {
          this.workCaseArr = res.result.list
          this.workCaseArr.forEach(item => {
            let time = this.$timeDifference(item.workStartTime, item.workEndTime)
            if (isNaN(time[0]) && isNaN(time[1])) {
              item.workTotalTime = ''
            } else {
              item.workTotalTime = time[0] > 0 ? time[0] + '小时' + time[1] + '分钟' : time[1] + '分钟'
            }
          })
        }
      })
    },
    // 获取作业记录
    getWorkRecordList (id) {
      let params = {
        pageNum: 1,
        pageSize: 99999,
        uId: id,
        nowtime: this.workDate,
      }
      this.$http.getMapWorkRecordList(params).then(res => {
        if (res.code == 200) {
          this.workRecordArr = res.result.result.rows.map(item => {
            if (item.imgurls) {
              item.imgurls = item.imgurls.split(',').filter(items => items)
            }
            return item
          })
        }
      })
    },
    // 获取作业日历
    getWorkCalendarList () {
      let params = {
        carId: this.dataId,
        workMonth: this.workMonth
      }
      this.$http.getMapCarWorkList(params).then((res) => {
        if (res.code === 200) {
          this.workCalendarArr = res.result.list
        }
      })
    },
    // 获取违规日历
    getViolationCalendarList () {
      let params = {
        carId: this.dataId,
        starttime: this.violationDate,
      }
      this.$http.getMapCarViolationList(params).then((res) => {
        if (res.code === 200) {
          let data = res.result
          this.violationArr = data
        }
      })
    },
    // 获取油量 速度图表
    getCarOikOrSpeed () {
      this.$http.getMapCarOikOrSpeed({ carId: this.dataId }).then((res) => {
        this.speedOptions.series[0].data[0].value = parseInt(res.result.speed)
        this.$refs.speedRef.init()
        this.oilOptions.series[0].data[0].value = parseInt(res.result.oilMass)
        this.$refs.oilRef.init()
      })
    },
    timeInit () {
      let time = formatDate(new Date())
      let timeArr = time.split('-')
      this.workDate = time
      this.workMonth = timeArr[0] + '-' + timeArr[1]
      this.violationDate = timeArr[0] + '-' + timeArr[1]
    },
    // 作业日历点击上月下月触发
    onClickWorkMonthList () {
      let timeArr = formatDate(this.workCalendar).split('-')
      this.workMonth = timeArr[0] + '-' + timeArr[1]
      this.getWorkCalendarList()
    },
    // 违规日历点击上月下月触发
    onClickViolationMonthList () {
      let timeArr = formatDate(this.violationCalendar).split('-')
      this.violationDate = timeArr[0] + '-' + timeArr[1]
      this.getViolationCalendarList()
    },
    // 作业概况 作业记录切换
    onClickWork (i) {
      this.workDate = formatDate(new Date())
      this.currentWorkIndex = i
    },
    // 作业日历 异常日历切换
    onClickCalendarTab (i) {
      this.currentCalendarIndex = i
    },
    // 作业记录 作业概况选择日期
    onChangeWorkDate (date) {
      this.workDate = date
      if (this.currentWorkIndex == 0) {
        this.getWorkList()
      } else {
        // 使用详情接口返回的绑定账号的id
        if (this.detail.bindaccount) {
          this.getWorkRecordList(this.detail.bindaccount)
        }
      }
    },
    // 作业概况时间 去掉年月日
    getWorkTime (time) {
      if (time) {
        let arr = time.split(' ')
        return arr[1]
      } else {
        return ''
      }
    },
    // 点击违规日历某一天
    onClickCalendar (date) {
      if (!this.getViolationCalendarDate(date)) return
      // 违规数组中日期 = 点击的日期
      let arr = []
      this.violationArr.forEach(item => {
        if (item.alarmTime == date) {
          arr.push(item)
        }
      })
      this.violationModalData = arr
      this.violationModalDate = date
      this.calendarCaseVisible = true
    },
    // 是否超出日期
    isBeyondDate (date) {
      return formatDate(new Date()) < date
    },
    // 某天是否有排班
    getWorkCalendarDate (date) {
      return this.workCalendarArr.find(item => item.workDate.split(' ')[0] == date)
    },
    // 某天是否有异常
    getViolationCalendarDate (date) {
      return this.violationArr.find(item => item.alarmTime == date)
    },
    // 加油记录 / 维修记录
    onClickRefuel (value) {
      if (value == 'refuel') {
        this.modalTitle = '加油记录'
      } else {
        this.modalTitle = '维修记录'
      }
      this.getList()
      this.refuelVisible = true
    },
    getList () {
      return
      switch (this.modalTitle) {
        case '加油记录':
          this.getRefuelList()
          break;
        case '维修记录':
          this.getRepairList()
          break;
        default:
          break;
      }
    },
    // 获取加油记录列表
    getRefuelList () {
      let params = {
        deptIdForCar: "",
        carNumid: this.dataId,
        serviceVendorName: "",
        oilCardNum: '',
        page: 1,
        size: 10
      }
      this.tableLoading = true
      this.$http.getCarRefuelList(params).then((res) => {
        this.data = res.result.oillist
        this.tableLoading = false
      }).catch((err) => {
        this.tableLoading = false
      })
    },
    // 获取维修记录列表
    getRepairList () {
      let params = {
        deptIdForCar: "",
        carNumid: this.dataId,
        serviceVendorName: "",
        orderNo: '',
        page: 1,
        size: 10
      }
      this.tableLoading = true
      this.$http.getCarRepairList(params).then((res) => {
        this.data = res.result.reapairlist
        this.tableLoading = false
      }).catch((err) => {
        this.tableLoading = false
      })
    },
    // 摄像头
    onClickVideo () {
      if (this.detail.videoonlinestatus == 0) {
        let params = {
          equipcode: this.detail.equipcode,
          eqptype: this.detail.eqptype,
          details: this.detail.channels,
        }
        bus.$emit('showPlayVideoModal', params)
      }
    },
    // 轨迹
    onClickTrack () {
      const { href } = this.$router.resolve({
        name: 'track',
        query: { type: 'car', id: this.detail.id, carType: this.detail.carTypeName, name: this.detail.plateNumber }
      })
      window.open(href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/scss/iviewCssReset/input";
@import "@/scss/iviewCssReset/modal";
@import "@/scss/iviewCssReset/elCalendar";
@import "@/scss/iviewCssReset/table";
@import "@/scss/iviewCssReset/datePicker";
@import "@/scss/iviewCssReset/progress";
::v-deep {
  .ivu-table {
    .ivu-table-header {
      tr {
        th {
          border-bottom-color: #3e434a;
        }
      }
    }
  }
}

.car-popup-cont-left {
  margin-right: 78px;
  width: 450px;
}

.car-popup-cont-right {
  width: 830px;
}

/* 车辆左 */
.search-detail-left {
  .left-echar {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left-echar-item {
    }
  }

  .left-carimg {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 40px;
    width: 100%;

    img {
      // width: 340px;
      height: 288px;
    }
  }

  .left-btns {
    display: flex;
    justify-content: space-around;
    margin: auto;

    .left-btns-item {
      display: flex;
      justify-content: center;
      width: 120px;
      height: 58px;
      background-image: url(../../../../assets/main/btn_bg.png);
      background-size: 100%;
      color: #eee;
      padding-top: 8px;
      cursor: pointer;
      margin-right: 5px;
    }
  }
}

.search-detail-right {
  .right-top {
    border: 1px solid rgba(255, 255, 255, 0.1);

    .right-top-row1 {
      height: 51px;
      line-height: 51px;
      color: #eee;
      font-size: 20px;
      padding-left: 20px;
      div {
        margin-right: 20px;
        cursor: pointer;
      }
    }

    .right-top-row::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      box-sizing: border-box;
      border-left: 3px solid #fff;
      border-right: 3px solid #fff;
      background: rgba(255, 255, 255, 0.1);
    }

    .right-top-row2 {
      display: flex;
      padding: 20px 16px;

      img {
        width: 62px;
        height: 62px;
        border-radius: 62px;
        margin-right: 30px;
        cursor: default;
      }

      .right-top-row2-cont {
        box-sizing: border-box;
        flex: 1;

        .right-top-row2-cont-item {
          display: flex;

          div {
            width: 33%;
            color: rgba(255, 255, 255, 0.5);

            span {
              color: #eee;
            }
          }
        }

        .right-top-row2-cont-item:first-child {
          margin-bottom: 16px;
        }
      }
    }

    .right-top-row3 {
      display: flex;
      height: 32px;
      line-height: 32px;
      padding: 0 16px;
      background: rgba(255, 255, 255, 0.1);

      div {
        width: 33%;
        color: rgba(255, 255, 255, 0.5);

        span {
          color: #eee;
        }
      }
    }
  }

  .right-cont {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    .right-cont-title {
      position: relative;
    }

    .right-cont-cont {
      padding: 16px 26px;

      .right-cont-cont-row1 {
        display: flex;
        justify-content: space-between;

        div {
          color: rgba(255, 255, 255, 0.5);
          font-size: 14px;
          margin-right: 20px;

          span {
            color: #25bb96;

            .number {
              font-size: 24px;
            }
          }
        }
      }

      .right-cont-cont-row2 {
        display: flex;
        margin-top: 16px;
        justify-content: space-between;

        .right-cont-cont-row2-item {
          .right-cont-cont-row2-item-top {
            color: #eee;
          }

          .right-cont-cont-row2-item-bottom {
            color: rgba(255, 255, 255, 0.7);
            padding-top: 5px;

            span:first-child {
              font-size: 24px;
              color: #eee;
            }

            span:last-child {
              display: inline-block;
              padding: 2px 8px;
              background-color: rgba(13, 128, 235, 0.5);
              color: #eee;
              border-radius: 9px;
              margin-left: 8px;
              line-height: 1;
            }
          }
        }
      }
    }
  }

  .right-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // 右下角盒子
    .right-bottom-box {
      width: 49%;
      margin-top: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      // 标题
      .right-bottom-box-title {
        height: 51px;
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
        ul {
          display: flex;
          align-items: center;
          flex: 2;

          li {
            flex: 1;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
          }
          .current {
            color: #25bb96;
          }
        }
      }
    }
    // 作业概况
    .work-case {
      height: 435px;
      padding: 20px;
      overflow-y: auto;
      color: #ffffff;
      font-size: 14px;
      .work-case-item {
        margin-bottom: 10px;
        ul {
          li {
            margin-bottom: 10px;
          }
        }
        .multimedia {
          display: flex;
          flex-wrap: wrap;
          .item {
            width: 32%;
            margin-right: 2%;
            img {
              width: 100%;
            }
          }
          .item:nth-child(3n) {
            margin-right: 0;
          }
          .video-item {
            position: relative;
            background: #797979;
            i {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
    // 作业记录
    .work-record {
      height: 435px;
      // max-height: 280px;
      padding: 20px;
      overflow-y: auto;
      color: #ffffff;
      font-size: 14px;
      .work-cont-item {
        margin-bottom: 30px;
        div {
          margin-bottom: 10px;
        }
        .status {
          span {
            width: 54px;
            height: 22px;
            text-align: center;
            border-radius: 4px;
            padding: 0 4px;
          }
          .over {
            color: #25bb96;
            background: #d6f1 ea;
            border: 1px solid #25bb96;
          }
          .unover {
            color: #f68315;
            background: #fcdfc6;
            border: 1px solid #f68315;
          }
        }
        .percent {
          p {
            min-width: 60px;
          }
        }
      }
      .work-cont-item:last-child {
        margin-bottom: 0;
      }
    }

    // 日历
    .calendar-box {
      .calendar-title {
        height: 51px;
        line-height: 51px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        padding-left: 20px;
        display: flex;
        div {
          margin-right: 20px;
          cursor: pointer;
        }

        .current {
          color: #25bb96;
          position: relative;
        }

        // .current::after {
        //   content: "";
        //   position: absolute;
        //   bottom: 8px;
        //   left: 50%;
        //   transform: translateX(-50%);
        //   width: 0;
        //   height: 0;
        //   border-left: 5px solid transparent;
        //   border-right: 5px solid transparent;
        //   border-bottom: 4px solid #25bb96;
        // }
      }

      .calendar-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        box-sizing: border-box;
        border-left: 3px solid #fff;
        border-right: 3px solid #fff;
        background: rgba(255, 255, 255, 0.1);
      }
    }
    // 作业日历
    .work-calendar {
      // 日历组件
      .calendar {
        .cont {
          .cont-status {
            // .success {
            //   display: inline-block;
            //   width: 8px;
            //   height: 8px;
            //   border-radius: 8px;
            //   text-align: center;
            //   background: rgba(255, 255, 255, 0.4);
            // }
            .err {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 8px;
              text-align: center;
              background: #eb6100;
            }
          }
        }
        .success {
          color: #fff;
          p {
            background: #25bb96;
          }
        }
      }
    }
    // 异常日历
    .violation-calendar {
      position: relative;
      // 日历组件
      .calendar {
        .cont {
          .cont-status {
            .err {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 8px;
              text-align: center;
              background: #eb6100;
            }
          }
        }
        .success {
          color: #fff;
          p {
            background: #25bb96;
          }
        }
      }
      .case {
        min-width: 120px;
        border-radius: 2px;
        color: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .title {
          height: 30px;
          line-height: 30px;
          padding: 0 12px;
          background: #1b1b1b;
        }
        .cont {
          padding: 0 12px;
          background: #121212;
          .item {
            padding-bottom: 5px;
            display: flex;
            justify-content: space-between;
            span {
              margin-left: 10px;
              color: #eb6100;
            }
          }
          .item:nth-child(1) {
            padding-top: 5px;
            margin-top: -1px;
          }
        }
      }
    }
  }
}

.detail-popup-right {
  /* 详情公共样式 stard */
  .border-bottom {
    position: relative;
  }

  .border-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  /* 详情公共样式 end */
}

::v-deep {
  .ivu-modal-body {
    padding: 0;
  }

  .ivu-input {
    background: #282b2f;
  }
}

.refuel {
  .refuel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    border-bottom: 1px solid #555a64;
    background: #3e434a;
    padding: 0 44px 0 44px;

    .refuel-title-left {
      display: flex;
      align-items: center;

      span {
        margin-right: 12px;
        margin-left: 12px;
        color: rgba(255, 255, 255, 0.65);
      }
    }

    .refuel-title-right {
      display: flex;

      div {
        width: 56px;
        height: 28px;
        color: #ccc;
        border-radius: 4px;
        border: 1px solid #cccccc;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
      }

      .show {
        background: #25bb96;
        color: #fff;
        border: 1px solid #25bb96;
        margin-right: 8px;
      }
    }
  }

  .refuel-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    background: #3e434a;
    color: #fff;
    font-weight: 500;
    padding: 0 44px 0 44px;
  }

  .noData {
    padding: 150px 0;
  }
}
</style>
